<template>
  <div  class="login-h5">
    <div class="login-detail">
      <el-form ref="form" :model="user" :rules="rules" >
        <el-form-item prop="name">
          <el-input v-model="user.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-tooltip class="login-edit-findPassword" effect="dark" :content="tooltip" placement="bottom">
            <el-button size="mini">忘记密码</el-button>
          </el-tooltip>

          <el-button class="login-edit-submit" size="mini" type="primary" @click="onSubmit('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { storageSet } from '@/utill/storage.js'

export default {
  name: 'login',
  data() {
    return {
      user: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ]
      },
      tooltip: '请联系管理员!'
    }
  },
  methods: {
    onSubmit(formName) {
       this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({path: '/gift-h5'})
            
            storageSet('token', '')
            storageSet('username', this.user.name)
            storageSet('deadline', '2021-3-27 10:53:30')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
}
</script>